@import '../../sumo/less/variables.less';

.AAQApp {
  &__ProductSelector {
    &__ProductCard {
      &.selected {
        &::before {
          box-shadow: 0 0 10px #0f0 inset;
        }
      }
    }
  }

  &__TopicSelector {
    list-style: none;
    margin: 0;
    padding: 0;

    &__Topic {
      color: @textBlue;
      cursor: pointer;
      margin-bottom: 20px;

      &:hover {
        color: @textDarkBlue;
        text-decoration: underline;
      }

      > h3 {
        margin-bottom: 0;
      }

      > p {
        margin-top: 0;
      }

      &.selected {
        text-decoration: underline;
      }
    }
  }

  &__TitleContentEditor {
    margin-bottom: 40px;

    .row {
      display: flex;

      .AAQApp__TitleContentEditor__Editor {
        width: 100%;

        > div:not(:last-child) {
          margin-bottom: 10px;
        }

        &__Title {
          flex: 0 0;
        }

        &__Content {
          flex: 1 1 100%;

          textarea {
            height: 90%;
            min-height: 350px;
          }
        }

        label {
          display: block;
          font-weight: bold;
          margin-bottom: 10px;
        }

        input,
        textarea {
          width: 100%;
        }

        .searchbox {
          box-sizing: border-box;
          height: 30px;
        }
      }
    }
  }

  &__AttachmentField {
    &__Attachments {
      list-style: none;
      margin: 20px 0 0 0;
      padding: 0;

      > li {
        background: #fff;
        display: inline-block;
        height: 120px;
        margin-bottom: 20px;
        margin-right: 20px;
        position: relative;
        vertical-align: middle;
        width: 120px;

        .delete {
          background: #000;
          border: 2px solid #fff;
          border-radius: 50%;
          color: #fff;
          cursor: pointer;
          font-size: 18px;
          height: 24px;
          left: -12px;
          line-height: 22px;
          position: absolute;
          top: -12px;
          width: 24px;
          text-align: center;

          &:before {
            content: '\f00d'; // Close (cross) icon
            font-family: FontAwesome;
          }
        }
      }
    }
  }

  &__SuggestionList {
    > ul {
      list-style: none;
      margin: 0;
    }

    &__SuggestionItem {
      margin: 40px 0;
      min-height: 56px;
      padding-left: 80px;
      position: relative;

      &:before {
        background: transparent url('../../sumo/img/search-icons-sprite.png') no-repeat scroll 0px 0px;
        content: '';
        height: 56px;
        left: 0px;
        position: absolute;
        top: 0px;
        width: 56px;
      }

      &:first-of-type {
        margin-top: 0;
      }

      &:last-of-type {
        margin-bottom: 0;
      }

      &.document {
        &:before {
          background-position: -46px -46px;
        }
      }

      &.question {
        &:before {
          background-position: -46px -194px;
        }
      }
    }
  }

  &__TroubleshootingData {
    width: 100%;

    label {
      margin-right: 10px;
    }

    &__dataView {
      background: #eee;
      border: 1px solid #888;
      border-radius: 3px;
      max-height: 200px;
      overyflow-y: auto;
    }
  }

  #register-form {
    padding-top: 30px;
  }

  .btn-submit {
    &.disabled {
      display: none;
    }
  }
}
